<template>
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="角色名称" prop="Role_Name">
        <el-input v-model="ruleForm.Role_Name" />
      </el-form-item>
  
      <el-form-item label="状态" prop="Role_State">
        <el-radio-group v-model="ruleForm.Role_State">
          <el-radio :value="true">启用</el-radio>
          <el-radio :value="false">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="权限" prop="permissionid">
        <el-tree
          style="max-width: 600px"
          :data="data"
          ref="treeRef"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[1,2,3,4,5]"
          :props="defaultProps"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref,onMounted } from 'vue'
  import { ElMessage, type ComponentSize, type ElTree, type FormInstance, type FormRules } from 'element-plus'
  import axios from 'axios';
  import { useRoute, useRouter } from 'vue-router';

  const route=useRoute()
  const router=useRouter()
  
  onMounted(()=>{
    LoadPermission()
    LoadRole()
  })
  
  const formSize = ref<ComponentSize>('default')
  const ruleFormRef = ref<FormInstance>()
  const ruleForm = reactive({
    Role_Id:0,
    Role_Name: '',
    Role_State: '',
  })
  
  
  //数据验证
  const rules = reactive<FormRules>({
    Role_Name: [
      { required: true, message: '角色名称不能为空', trigger: 'blur' },
      { min: 3, max: 10, message: '长度3-10个字符', trigger: 'blur' },
    ],
    Role_State: [
      {
        required: true,
        message: '请选择状态',
        trigger: 'change',
      },
    ],
  })
  //完成修改
  const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log('submit!')
        console.log(treeRef.value?.getCheckedKeys(false))
        var perid=treeRef.value?.getCheckedKeys(false)
        axios.put("/api/User/UpdateRolePermission",ruleForm,{
          params:{
            perList:perid?.toString()
          }
        })
        .then(res=>{
          if(res.data.Data==1){
            ElMessage.success("修改成功")
            router.push("/ShowRolePermission")
          }else if(res.data.Data==-1){
            ElMessage.warning("角色名称已存在")
            
          }else{
            ElMessage.error("添加失败")
          }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  //重置按钮
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
  }
  
  //树形控件
  const defaultProps = {
    children: 'children',
    label: 'label',
  }
  const data = ref([{
      "id": 0,
      "label": "",
      "children": []
  }])
  
  //通过ref 引用ElTree 的实例 通过treref.value来获取实例
  const treeRef=ref<InstanceType<typeof ElTree>>();
  //加载权限信息
  const LoadPermission=()=>{
    axios.get("/api/User/GetPermission?Pid=0")
    .then(res=>{
      data.value=res.data.Data
    })
  }

  //加载角色信息
  const LoadRole=()=>{
    //获取角色信息
    axios.get("/api/User/GetRoleInfo",{
        params:{
            Rid:route.params.Rid
        }
    })
    .then(res=>{
        ruleForm.Role_Id=res.data.Data.Role_Id
        ruleForm.Role_Name=res.data.Data.Role_Name
        ruleForm.Role_State=res.data.Data.Role_State
        
    })
    //获取权限信息
    axios.get("/api/User/GetPermissionList?Rid="+route.params.Rid)
    .then(res=>{
        console.log(res.data.Data)
        //通过属性组件方法设置子节点未选中状态
        treeRef.value!.setCheckedKeys(res.data.Data)
    })
  }
  </script>
  
  